<template>
	<view class="container">
		<img :src="audioPlayer.audioImg" class="bgimg" alt="">
		<view class="contentTop">
			<view class="contentTopLeft">
				<uni-icons type="back" size="30" @click="backBtn"></uni-icons>
				<view class="topTracks">
					<uni-notice-bar style="background: 0; height: 40rpx;padding: 0;margin: 0;" scrollable
						:text="audioPlayer.audioName" />
					<p style="color: #999; font-size: 24rpx;">
						{{audioPlayer.arName}}
						<uni-icons type="right" size="15" color="#999"></uni-icons>
					</p>
				</view>
			</view>
			<view class="contentTopRight">
				<uni-icons type="redo" size="30"></uni-icons>
			</view>
		</view>
		<view class="detailContent">
			<img src="/static/needle-ab.png" alt="" class="img_needle" :class="{img_needle_acitve: !audioPlayer.playFlag}">
			<img src="/static/cd.png" alt="" class="img_cd">
			<img :src="audioPlayer.audioImg" alt="" class="img_ar" :class="{img_ar_active: !audioPlayer.playFlag,img_ar_pauesd: audioPlayer.playFlag}">
		</view>
		<view class="footerContent">
			<uni-icons custom-prefix="iconfont" type="icon-xunhuan" size="35"></uni-icons>
			<uni-icons custom-prefix="iconfont" type="icon-shangyishoushangyige" size="35"></uni-icons>
			<uni-icons custom-prefix="iconfont" type="icon-bofang" size="50" @click="playMusic" v-if="audioPlayer.playFlag"></uni-icons>
			<uni-icons custom-prefix="iconfont" type="icon-zanting" size="50" @click="playMusic" v-else></uni-icons>
			<uni-icons custom-prefix="iconfont" type="icon-xiayigexiayishou" size="35"></uni-icons>
			<uni-icons custom-prefix="iconfont" type="icon-liebiao-" size="35"></uni-icons>
		</view>
	</view>
</template>

<script>
	import {
		mapState,mapMutations
	} from 'vuex'
	export default {
		data() {
			return {

			};
		},
		onLoad() {
			console.log(this);
		},
		computed: {
			...mapState(['audioPlayer'])
		},
		methods: {
			...mapMutations(['updataIsbtnShow']),
			
			playMusic() {
				uni.$emit("playMusic",{});
			},
			backBtn() {
				uni.navigateBack(-1)
			}
		}
	}
</script>

<style lang="less">
	.container {
		width: 100%;
		height: 100%;
		
		.bgimg {
			width: 100%;
			height: 100%;
			position: absolute;
			filter: blur(70px);
			z-index: -1;
		}

		.contentTop {
			// border: 1px solid red;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 20rpx;

			.contentTopLeft {
				width: 50%;
				height: 100rpx;
				display: flex;
				align-items: center;
				
				.topTracks {
					width: 60%;
					height: 100rpx;
					margin-left: 40rpx;
					padding-top: 20rpx;
					
					/deep/ span {
						font-size: 30rpx;
						color: black;
					}
					/deep/ .uni-noticebar {
						background-color: 0;
					}
				}
			}

			.contentTopRight {
				margin-right: 20rpx;
			}
		}
		.detailContent {
			// border: 1px solid red;
			width: 100%;
			height: 800rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.img_needle {
				width: 160rpx;
				height: 230rpx;
				position: absolute;
				left: 46%;
				z-index: 1;
				transform-origin: 0 0;
				transform: rotate(0deg);
				transition: all 2s;
			}
			.img_needle_acitve {
				width: 160rpx;
				height: 230rpx;
				position: absolute;
				left: 46%;
				z-index: 1;
				transform-origin: 0 0;
				transform: rotate(16deg);
				transition: all 2s;
			}
			.img_cd {
				width: 480rpx;
				height: 480rpx;
				position: absolute;
				// z-index: -1;
				top: 320rpx;
			}
			.img_ar {
				border-radius: 50%;
				width: 300rpx;
				height: 300rpx;
				position: relative;
				top: 290rpx;
				animation: routate_ar 5s linear infinite;
			}
			.img_ar_active {
				animation-play-state: running;
			}
			.img_ar_pauesd {
				animation-play-state: paused;
			}
			@keyframes routate_ar {
				0% {
					transform: rotateZ(0deg);
				}
				100% {
					transform: rotateZ(360deg);
				}
			}
		}
		.footerContent {
			// border: 1px solid red;
			width: 100%;
			height: 150rpx;
			position: absolute;
			bottom: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
	}
</style>
